import React, { Component } from "react";
// 引入组件
import { CSSTransition } from "react-transition-group";
// 引入样式
import "./Csstransition.css";

class Csstransition extends Component {
  constructor() {
    super();
    this.state = {
      inProp: true,
    };
  }
  toggle() {
    this.setState({
      inProp: !this.state.inProp,
    });
  }
  render() {
    return (
      <div>
        <button onClick={() => this.toggle()}>toggle</button>
        {/* in:控制显示隐藏，类似v-if */}
        <CSSTransition
          in={this.state.inProp}
          timeout={200}
          classNames="my-node"
          unmountOnExit
        >
          <div>{"I'll receive my-node-* classes"}</div>
        </CSSTransition>
      </div>
    );
  }
}

export default Csstransition;
